<template>
  <div class="personal-page">
    <mu-flex
      class="main-operate"
      justify-content="between"
      align-items="center"
    >
      <mu-flex align-items="center">
        <div class="tab-item tab-item-active">
          个人
        </div>
        <div class="tab-item" @click="redirectToGroup">小组</div>
      </mu-flex>
      <mu-flex align-items="center" class="search-operate">
        <mu-select
          class="search-select"
          solo
          popover-class="select-menu"
          v-model="select"
          @change="groupSelect"
        >
          <mu-option label="全部" value="0"></mu-option>
          <mu-option
            v-for="item in groups"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></mu-option>
        </mu-select>
        <mu-paper :z-depth="1" class="search-input">
          <a-input
            v-model="searchContent"
            placeholder="请输入关键词搜索"
            :allowClear="true"
            @pressEnter="onSearch"
          >
            <a-icon slot="suffix" type="search" @click="onSearch" />
          </a-input>
        </mu-paper>
      </mu-flex>
    </mu-flex>
    <mu-paper class="main-data">
      <div v-show="loading" class="loading-progress">
        <mu-linear-progress
          :value="linear"
          mode="determinate"
        ></mu-linear-progress>
      </div>
      <mu-flex class="info" justify-content="between" align-items="center">
        <mu-flex align-items="center">
          <img
            src="https://image.xuexiwangzhe.com/FoAU_Ex4NT1VnWHFWXC7WMyV2ja0"
            class="img-info"
          />
          <span class="info-content"
            >友情提示：若课程未结束，请刷新页面查看最新数据</span
          >
        </mu-flex>
        <div>
          <mu-button class="operate-btn" flat @click="exportData">
            <img
              class="operate-btn-img"
              src="https://image.xuexiwangzhe.com/Fn7HDwm57kMxOjMvuBqZLGI3yKS9"
            />
            导出数据
          </mu-button>
          <mu-button class="operate-btn" flat @click="getData">
            <img
              class="operate-btn-img"
              src="https://image.xuexiwangzhe.com/FqVBxuSbrGY7Xlfz9SO0DHh1VtXw"
            />
            刷新
          </mu-button>
        </div>
      </mu-flex>
      <mu-data-table
        class="data-table"
        :columns="columns"
        :sort.sync="sort"
        :rowClassName="dataRowClass"
        :data="list"
      >
        <template slot-scope="scope">
          <td v-html="rankContent(scope.row.rank)"></td>
          <td>
            <mu-flex align-items="center">
              <mu-avatar class="user-photo" size="30">
                <img :src="baseImgUrl + scope.row.photo" />
              </mu-avatar>
              <span class="user-name">
                {{ scope.row.userName }}
              </span>
            </mu-flex>
          </td>
          <td>{{ scope.row.groupName }}</td>
          <td>{{ scope.row.credit }}</td>
          <td>{{ scope.row.praiseNum }}</td>
          <td>{{ scope.row.commentNum }}</td>
          <td>{{ scope.row.remarkNum }}</td>
          <td>{{ scope.row.stickNum }}</td>
          <td v-html="changeContent(scope.row.change)"></td>
        </template>
      </mu-data-table>
      <mu-flex justify-content="center" style="margin: 32px 0;">
        <mu-pagination
          :total="dataCount"
          :current.sync="page"
          @change="getData"
        ></mu-pagination>
      </mu-flex>
    </mu-paper>
  </div>
</template>

<script>
export default {
  props: ["projectid"],
  data() {
    return {
      select: "0",
      searchContent: "",
      search: "",
      linear: 10,
      loading: false,
      page: 1,
      size: 10,
      dataCount: 0,
      baseImgUrl: "https://image.xuexiwangzhe.com/",
      sort: {
        name: "",
        order: "asc",
      },
      columns: [
        {
          title: "积分排名",
          name: "rank",
          align: "center",
        },
        {
          title: "学员",
          name: "userName",
          width: 180,
          align: "center",
        },
        {
          title: "分组",
          name: "groupName",
          // width: 126,
          align: "center",
        },
        {
          title: "积分",
          name: "credit",
          // width: 126,
          align: "center",
        },
        {
          title: "获赞",
          name: "praiseNum",
          // width: 126,
          align: "center",
        },
        {
          title: "获评论",
          name: "commentNum",
          // width: 126,
          align: "center",
        },
        {
          title: "获点评",
          name: "remarkNum",
          // width: 126,
          align: "center",
        },
        {
          title: "获优秀",
          name: "stickNum",
          // width: 126,
          align: "center",
        },
        {
          title: "波动",
          name: "change",
          // width: 126,
          align: "center",
        },
      ],
      list: [],
      groups: [],
    };
  },
  created() {
    console.log(this.projectid);
    this.getData();
  },
  methods: {
    rankContent(value) {
      switch (value) {
        case 1:
          return '<img src="https://image.xuexiwangzhe.com/FoaFfXXgv_9INm3qtGTk6eEKRDne" class="rank-img"/>';
        case 2:
          return '<img src="https://image.xuexiwangzhe.com/Fp2NO2CJqxJjunqvS13SLM3N0YXy" class="rank-img"/>';
        case 3:
          return '<img src="https://image.xuexiwangzhe.com/FmL9jhN1l0xW_tgk8nUEMQEzOrgs" class="rank-img"/>';
        default:
          return value;
      }
    },
    changeContent(value) {
      switch (value) {
        case -1:
          return '<img src="https://image.xuexiwangzhe.com/Fro_7TAKmgu5AHw35gdXrOXnuu_a" class="change-img"/>';
        case 0:
          return '<img src="https://image.xuexiwangzhe.com/FtbHizVLXiP0C9Sh9o235Y5En-c2" class="change-img"/>';
        case 1:
          return '<img src="https://image.xuexiwangzhe.com/Fuazx-WA7OWeo26hutSAUAK4d08_" class="change-img"/>';
        default:
          return '<img src="https://image.xuexiwangzhe.com/FtbHizVLXiP0C9Sh9o235Y5En-c2" class="change-img"/>';
      }
    },
    dataRowClass(index, row) {
      switch (row.rank) {
        case 1:
          return "rank-row rank-one-row";
        case 2:
          return "rank-row rank-two-row";
        case 3:
          return "rank-row rank-three-row";
        default:
          return "";
      }
    },
    startloading() {
      this.loading = true;
      this.linear = 90;
      this.timer = setInterval(() => {
        this.linear += 10;
        if (this.linear >= 90) clearInterval(this.timer);
      }, 1000);
    },
    onSearch() {
      this.search = this.searchContent;
      this.getData();
    },
    groupSelect() {
      this.getData();
    },
    exportData() {
      let params = {
        projectId: this.projectid,
        groupId: this.select,
        search: this.search,
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };

      let urlpath =
        "https://minitool.xuexiwangzhe.com/miniapp/creditresult/downloadPersonCredit";
      let urlpms = new URLSearchParams(params);
      let url = urlpath + "?" + urlpms.toString();
      location.href = url;
    },
    getData() {
      this.startloading();
      const params = {
        projectId: this.projectid,
        groupId: this.select,
        search: this.search,
        page: this.page,
        size: this.size,
      };
      this.$axios.get("/creditresult/personCredit", { params }).then((res) => {
        if (res.success) {
          this.groups = res.userGroups;
          const result = res.creditresultvoPage;
          if (result) {
            this.dataCount = result.totalElements;
            let resultList = result.content;
            const rankNum = (this.page - 1) * this.size;
            resultList.forEach((item, index) => {
              item.rank = rankNum + index + 1;
            });
            this.list = resultList;
          } else {
            this.list = [];
          }
          this.linear = 100;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      });
    },
    redirectToGroup() {
      const _queryPms = new URLSearchParams(this.$route.query);
      this.$router.push("/index/group?" + _queryPms);
    },
  },
};
</script>
<style lang="less">
.personal-page {
  margin: 0 auto;
  width: 1250px;
  height: 100%;

  .main-operate {
    width: 100%;
    padding-top: 30px;
    margin-bottom: 20px;
  }

  .main-data {
    position: relative;
    padding: 20px;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 8px;

    .loading-progress {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }

    .table-operate-btn {
      color: #3d6dfe;
    }

    .rank-img {
      width: 30px;
    }

    .change-img {
      width: 10px;
    }

    .user-photo {
      margin-right: 20px;
    }

    .user-name {
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rank-one-row {
      background-color: #fffbe6;
    }

    .rank-two-row {
      background-color: #e6f7fe;
    }

    .rank-three-row {
      background-color: #f5feee;
    }
    .info {
      margin-bottom: 30px;
    }

    .img-info {
      width: 20px;
      margin-right: 10px;
    }

    .info-content {
      color: #bab7b7;
    }

    .operate-btn {
      &:last-child {
        margin-right: 0;
      }
      &-img {
        width: 13px;
        margin-right: 10px;
      }
      margin-right: 10px;
      color: #3366ff;
    }
  }

  .tab-item {
    &:last-child {
      margin-right: 0;
    }
    cursor: pointer;
    height: 60px;
    line-height: 60px;
    margin-right: 35px;
    font-size: 16px;
    color: #a3a3a3;
  }

  .tab-item-active {
    position: relative;
    font-size: 25px;
    color: #000;
    font-weight: bold;

    &::after {
      content: "";
      display: block;
      position: absolute;
      height: 5px;
      width: 20px;
      background-color: #3366ff;
      bottom: 0px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
  }

  .search-operate {
    margin-top: 15px;
  }

  .search-select {
    border: 1px solid #a3a3a3;
    box-shadow: 2px 5px 7px 0px rgba(197, 197, 197, 0.2);
    border-radius: 8px;
    width: 100px;
    height: 35px;
    min-height: auto;
    text-align: center;
    margin-right: 15px;
    input {
      text-align: center;
    }
    .mu-select-action {
      margin-left: -20px;
    }
  }

  .search-input {
    width: 220px;
    border-radius: 20px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
    input {
      border: none;
      border-radius: 20px;
      height: 35px;
      &::placeholder {
        color: #a3a3a3;
      }
    }
  }

  .data-table {
    th,
    td {
      font-size: 14px;
      text-align: center;
      height: 56px;
      line-height: 56px;
    }
    td {
      color: #a39f9f;
      border-bottom: 1px solid #ededed;
    }
    th {
      color: #626262;
      border-bottom: none;
    }
    .rank-row {
      td {
        color: #000;
        border-bottom: none;
      }
    }
    .row-one {
      background-color: #fffbe6;
    }
    .row-two {
      background-color: #e6f7fe;
    }
    .row-three {
      background-color: #f5feee;
    }
    .mu-table-header {
      background-color: #eef4ff;
    }
  }
}
</style>
